<!-- 主页 -->
<template>
  <div class="page-main">
    <div class="main">
      <div>
        <div style="margin-top: 20px; margin-left: 15px; margin-bottom: 10px;">
          <h1>确认预约信息</h1>
        </div>
        <van-cell-group title="">
          <van-cell title="会诊专家" icon="friends"/>
          <van-cell >
            <span style="margin-left: 5px; color: #646566;">分诊中心将根据患者情况为患者匹配合适的专家</span>
          </van-cell>
          <van-cell title="患者信息" icon="todo-list">
          </van-cell>
        </van-cell-group>
        <van-form style="padding-left: 15px;">
          <van-cell-group inset>
            <van-field v-model="state.ruleFrom.userName" required center name="患者姓名" label="患者姓名" placeholder="患者姓名" />
            <van-field v-model="state.ruleFrom.phoneNum" required center name="联系电话" label="联系电话" placeholder="联系电话" />
            <van-field v-model="state.ruleFrom.cureDesc_str" required center is-link readonly name="会诊诉求" label="会诊诉求"
              placeholder="会诊诉求" @click="state.showPicker = true" />
            <van-field v-model="state.ruleFrom.diseaseName" required center name="疾病名称" label="疾病名称" placeholder="疾病名称" />
            <van-field v-model="state.ruleFrom.patientDesc" required type="textarea" rows="4" maxlength="200" show-word-limit
              autosize name="病情描述" label="病情描述" placeholder="请输入病情描述" />
            <van-field v-model="state.ruleFrom.code" required center clearable label="验证码" placeholder="请输入验证码">
              <template #button>
                  <van-image :src="state.code_url" style="width: 120px; height: 47px; display: block;" @click="refreshClick"/>
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" @click="onSureClick">
              提交
            </van-button>
          </div>
        </van-form>
        <van-popup v-model:show="state.showPicker" position="bottom">
          <van-picker :columns="state.columns" @confirm="onConfirm" @cancel="state.showPicker = false" />
        </van-popup>
      </div>
    </div>
</div>
</template>

<script setup name="home">



import { Dialog, Toast } from "vant";
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

const { ctx, proxy } = getCurrentInstance();
const $router = useRouter();
const $route = useRoute()

onMounted(() => {
  if ($route.query.userId == undefined || $route.query.token == undefined) {
    Dialog({
      message: "出错啦，请重新选择患者",
      confirmButtonText: false,
      confirmButtonDisabled: false
    }).then(() => {
      console.log('on close')
    });
  } else {
    state.ruleFrom.token = Number($route.query.token)
    state.ruleFrom.userId = Number($route.query.userId)
    state.ruleFrom.userName = String($route.query.userName ? $route.query.userName : '')
    state.ruleFrom.phoneNum = String($route.query.phoneNum ? $route.query.phoneNum : '')
    state.code_url = `${process.env.VUE_APP_BASE_URL}/cs-api/appointment/code/${state.ruleFrom.userId}`
    getBaseData()
  }
});

const getBaseData = () => {
  const post_data = {
    userId: state.ruleFrom.userId
  }
  proxy.$http
    .get("/cs-api/appointment/curedesc/list", post_data)
    .then(res => {
      console.log(`${res.config.url}=====返回数据${JSON.stringify(res.data)}`)
      const data = res.data
      if (data.code == 0) {
        state.columns = data.data.map(item => {
          item.text = item.title
          item.value = item.type
          return item
        })
      } else {
        Toast(data.message)
      }
    })
    .catch(err => {
      console.log(err);
    });
}

const onConfirm = (row) => {
  state.ruleFrom.cureDesc_str = row?.text;
  state.ruleFrom.cureDesc = row?.value;
  state.showPicker = false;
}

const refreshClick = () => {
  state.code_url = `${process.env.VUE_APP_BASE_URL}/cs-api/appointment/code/${state.ruleFrom.userId}?now=${new Date().getTime()}`
}

const onSureClick = () => {
  if (!state.ruleFrom.userName || state.ruleFrom.userName.length == 0) {
    Toast('患者姓名不能为空！')
    return
  }
  if (!state.ruleFrom.phoneNum || state.ruleFrom.phoneNum.length == 0) {
    Toast('联系电话不能为空！')
    return
  }
  if (!state.ruleFrom.cureDesc_str || state.ruleFrom.cureDesc_str.length == 0) {
    Toast('会诊诉求不能为空！')
    return
  }
  if (!state.ruleFrom.code || state.ruleFrom.code.length == 0) {
    Toast('验证码不能为空！')
    return
  }
  if (!state.ruleFrom.token || state.ruleFrom.token.length == 0) {
    Toast('token不能为空！')
    return
  }
  console.log(`=====请求参数${JSON.stringify(state.ruleFrom)}`)
  proxy.$http
    .post("/cs-api/appointment/submit", state.ruleFrom)
    .then(res => {
      console.log(`${res.config.url}=====返回数据${JSON.stringify(res.data)}`)
      const data = res.data
      if (data.code == 0) {
        $router.push({
          name: 'complete',
          query: {
            userName: state.ruleFrom.userName,
            phoneNum: state.ruleFrom.phoneNum,
            patientDesc: state.ruleFrom.patientDesc,
          }
        })
      } else {
        Toast(data.message)
      }
    })
    .catch(err => {
      console.log(err);
    });
}

const state = reactive({
  title: "39互联网医院-立即预约",
  code_url: '',
  showPicker: false,
  ruleFrom: {
    userId: '',
    userName: '',
    phoneNum: '',
    cureDesc_str: '',
    cureDesc: '',
    diseaseName: '',
    patientDesc: '',
    code: '',
    token:''
  },
  columns: [],
})

</script>

<style scoped lang="scss">
.page-main {
  width: 100%;

  .main {
    margin: auto;

    .title {
      width: 100%;
      margin: 20px auto;
      text-align: center;
    }
  }
}
</style>
